<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="./index.js"></script>
    <title>Document</title>
</head>
<body>
    
</body>
</html>
<script>
    //历史上，JavaScript一直没有模块（module）体系，无法将一个大程序拆分成互相依赖的小文件，再用简单
    //的方法拼装起来，其他语言都有这项功能，比如Ruby的require、Python的import,甚至就连CSS都有
    //@import,但是JavaScript任何这方面的支持都没有，这对开发大型应用来说都是致命的。

    // ES6模块是通过export命令显示指定输出的代码，再通过import命令输入


    /*
        测试方式
        我们采用Nodejs方式进行测试Modeule语法
        但是nodejs采用的是Commonjs模块化规范，使用require引入模块；而impact是ES6的模块化规范关键字。
        想要使用import，必须引入babel转义支持，通过babel进行编译，使用变成node的模块化代码
        疑惑：为啥不用前端方式测试，前端方式测试会更加麻烦
        第一步：全局安装babel-cli  npm install -g babel-cli
        第二步：安装babel-preset-env npm inastall -D babel-preset-env
        第三步：运行代码babel-node --presets env index.js
    */

    //export 命令导出变量
    //export命令导出函数

    // import命令 使用export命令定义了模块的对外接口以后，其他JS文件就可以通过import命令加载这个模块
    //如果想为输入的变量重新获取一个名字，import命令要使用as 关键字，将输入的变量重命名
    // 除了指定加载某个输出值，还可以使用整体加载，即用星号（*）指定一个对象，所有输出值都挂载到这个对象上

    /*
        export default命令 
        从前面的例子可以看出，使用import命令的时候，用户需要知道所要加载的变量名或函数名，否则无法加载。
        但是，用户肯定希望快速上手，未必愿意阅读文档，去了解模块有哪些属性和方法
        为了给用户提供方便，让他们不用阅读文档就能加载模块，就要用到export defoult命令，为模块指定默认输出

        其他模块加载该模块时，import命令可以为该匿名函数指定任意名字
        
    */


</script>